/**
 * Created by admin on 2017/8/6.
 */


import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS
} from 'react-native';

//导入json数据
var shareData = require('./shareData.json');

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
var screenWidth = Dimensions.get('window').width;

//一些常量设置
var cols = 3;
var cellWH = 100;

var vMargin = (screenWidth - cellWH * cols) / (cols + 1);
var hMargin = 25;

var tabBarView = React.createClass({//类名一定要大写开头
    //设置初始值
    getInitialState() {
        return{
            //默认被选中的tabbar Item
            selectedTabBarItem: 'home'
        }
    },

    render() {
        return (
            <View style={styles.container}>
                {/*头部*/}
                <View style={styles.headerViewStyle}>
                    <Text style={{color:'white'}}>TabBar选项卡切换</Text>
                </View>

                {/*选项卡*/}
                <TabBarIOS
                    barTintColor='black'
                    tintColor='purple'
                    style={styles.tabbarStyle}
                >
                    {/*第一块*/}
                    <TabBarIOS.Item
                        //systemIcon="contacts"
                        title="首页" //与系统的不能同时使用
                        badge="3"
                        selected={this.state.selectedTabBarItem == 'home'}
                        onPress={()=>{this.setState({selectedTabBarItem: 'home'})}}
                    >
                        <View style={[styles.commonViewStyle,{backgroundColor:'red'}]}>
                            <Text>
                                首页
                            </Text>
                        </View>
                    </TabBarIOS.Item>

                    {/*第二块*/}
                    <TabBarIOS.Item
                        systemIcon="bookmarks"
                        badge="3"
                        selected={this.state.selectedTabBarItem == 'two'}
                        onPress={()=>{this.setState({selectedTabBarItem: 'two'})}}
                    >
                        <View style={[styles.commonViewStyle,{backgroundColor:'green'}]}>
                            <Text>
                                第二页
                            </Text>
                        </View>
                    </TabBarIOS.Item>

                    {/*第三块*/}
                    <TabBarIOS.Item
                        systemIcon="downloads"
                        badge="3"
                        selected={this.state.selectedTabBarItem == 'thr'}
                        onPress={()=>{this.setState({selectedTabBarItem: 'thr'})}}
                    >
                        <View style={[styles.commonViewStyle,{backgroundColor:'blue'}]}>
                            <Text>
                                第三页
                            </Text>
                        </View>
                    </TabBarIOS.Item>

                    {/*第四块*/}
                    <TabBarIOS.Item
                        systemIcon="favorites"
                        badge="3"
                        selected={this.state.selectedTabBarItem == 'four'}
                        onPress={()=>{this.setState({selectedTabBarItem: 'four'})}}
                    >
                        <View style={[styles.commonViewStyle,{backgroundColor:'purple'}]}>
                            <Text>
                                第四页
                            </Text>
                        </View>
                    </TabBarIOS.Item>
                </TabBarIOS>
            </View>
        );
    }
});


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    tabbarStyle: {
        flex: 1,
        width: width
    },
    commonViewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    headerViewStyle: {
        height: 64,
        backgroundColor: 'black',
        justifyContent:'center',
        alignItems: 'center'
    }
});

//输出类
module.exports = tabBarView;